import { h, Component } from 'preact';
import React, {PropTypes} from 'react';
import RcPicker from 'react-mobile-picker';
import Overlay from '~/components/Overlay';
import s from './style.scss';

function Picker({
  title,

  confirmText,
  cancelText,

  optionGroups,
  valueGroups,

  onChange,
  onConfirm,
	onCancel
}) {
	return (
    <Overlay>
      <div className={s.container}>
        <header className={s.header}>
          {cancelText
            ? <a className={s.cancel} onClick={onCancel}>{cancelText}</a>
            : null}
          <div className={s.title}>{title}</div>
          {confirmText
            ? <a className={s.confirm} onClick={onConfirm}>{confirmText}</a>
            : null}
        </header>
        <RcPicker
          optionGroups={optionGroups}
          valueGroups={valueGroups}
          onChange={onChange}
        />
      </div>
    </Overlay>
	);
}

Picker.propTypes = {
	title: PropTypes.string,
	optionGroups: PropTypes.object,
	valueGroups: PropTypes.object,

	confirmText: PropTypes.string,
	cancelText: PropTypes.string,

	onChange: PropTypes.func,
	onConfirm: PropTypes.func,
	onCancel: PropTypes.func
};
Picker.defaultProps = {
	confirmText: 'OK',
	cancelText: 'Cancel'
};

export default Picker;

